<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>选项</title>
        <style type="text/css">
            body {
                margin: 10px;
                font-size: 13px;
                font-family: Arial, 'Microsoft Yahei', Simsun, sans-serif;
                display: -webkit-box;
            }

            input[type="text"]{
                -webkit-border-radius: 2px;
                border: 1px solid #AAA;
                padding: 1px 3px;
            }

            /**canvas replace arrow(developing)*/
            input[type="button"] {
                -webkit-border-radius: 2px;
                -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
                -webkit-user-select: none;
                background: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
                border: 1px solid #AAA;
                color: #444;
                font-size: inherit;
                margin-bottom: 0px;
                min-width: 4em;
                padding: 3px 12px 3px 12px;
            }

            ul {
                list-style-type: none;
                padding: 0;
            }

            li {
                line-height: 2em;
            }

            a {
                color: #3F6EC2;
            }

            .commit {
                color: grey;
            }


            /*************************************************************************************************************************************/
            #navbar-container {
                -webkit-border-end: 1px solid #C6C9CE;
                background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #EAEEF3), -webkit-linear-gradient(left, #EAEEF3, #EAEEF3 97%, #D3D7DB);
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                width: 216px;
                z-index: 2;
            }

            #navbar-container h1 {
                -webkit-padding-end: 24px;
                -webkit-user-select: none;
                color: #53637D;
                cursor: pointer;
                font-size: 200%;
                font-weight: normal;
                margin: 0;
                padding-bottom: 14px;
                padding-top: 13px;
                text-align: end;
                text-shadow: white 0 1px 2px;
            }

            #navbar-container > ul {
                -webkit-user-select: none;
                margin: 0;
                padding: 0;
            }

            #navbar-container > ul > li {
                border-bottom: 1px solid transparent;
                border-top: 1px solid transparent;
                color: #426DC9;
                cursor: pointer;
                display: block;
                font-size: 105%;
                outline: none;
                padding: 7px 0;
                text-align: end;
                text-shadow: white 0 1px 1px;
                -webkit-padding-end: 24px;
            }

            #navbar-container > ul > li.selected {
            -webkit-box-shadow: 0px 1px 0px #F7F7F7;
            background: -webkit-linear-gradient(left, #BBCEE9, #BBCEE9 97%, #AABEDC);
            border-bottom: 1px solid #8FAAD9;
            border-top: 1px solid #8FAAD9;
            color: black;
            text-shadow: #BBCEE9 0 1px 1px;
            }

            /*************************************************************************************************************************************/
            #mainview {
            -webkit-box-align: stretch;
            -webkit-padding-start: 216px;
            margin: 0;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
            }

            #mainview > div {
            min-height: 100%;
            position: relative;
            box-sizing: border-box;
            max-width: 888px;
            min-width: 600px;
            padding: 0 24px ;
            }

            #mainview > div h1 {
            -webkit-padding-end: 24px;
            -webkit-user-select: none;
            color: #53637D;
            font-size: 200%;
            font-weight: normal;
            margin: 0;
            padding-bottom: 4px;
            padding-top: 13px;
            text-shadow: white 0 1px 2px;
            }

            section {
            -webkit-box-orient: horizontal;
            border-top: 1px solid #EEE;
            display: -webkit-box;
            margin-bottom: 20px;
            padding-top: 17px;
            }

            section > h3 {
            font-size: 105%;
            font-weight: bold;
            margin: 0;
            vertical-align: middle;
            width: 140px;
            }

            section > div:only-of-type {
            -webkit-box-flex: 1;
            }

            section > div:only-of-type label {
            margin-right: 5px;
            }
        </style>
    </head>

    <body>
        <div id="navbar-container">
            <h1>选项</h1>
            <ul>
                <li id="browserPageNav" class="selected">基本设置</li>
                <li id="aboutPageNav">关于</li>
            </ul>
        </div>
        <div id="mainview">
            <div id="browserPage">
                <h1>基本设置</h1>
                <section>
                    <h3>窗口显示方式：</h3>
                    <div>
                        <label><input type="checkbox" name="pin" value="1">一直显示窗口</label>
                        <p class="commit">需要重启浏览器</p>
                    </div>
                </section>
                <section>
                    <h3>桌面通知：</h3>
                    <div>
                        <label><input type="checkbox" name="notify" value="1">启用桌面通知</label>
                    </div>
                </section>
                <section>
                    <h3>歌词：</h3>
                    <div>
                        <label><input type="checkbox" name="lrc" value="1">显示歌词</label>
                    </div>
                </section>
            </div>
            <div id="aboutPage" style="display: none">
                <h1>关于</h1>
                <section id="illustrateSection">
                    <h3>说明：</h3>
                    <div>
                        <p>感谢您安装最新版的豆瓣FM 精美版！</p>
                        <p>任何问题或者建议可以联系作者</p>
                        <ul>
                            <li>邮箱: <a href="mailto:viclm@live.com">viclm@live.com</a></li>
                            <li>豆瓣: <a href="http://www.douban.com/people/viclm/">http://www.douban.com/people/viclm/</a></li>
                        </ul>
                    </div>
                </section>
                <section id="adSection">
                    <h3>作者的其他作品：</h3>
                    <div>
                        <p><a target="_black" href="https://chrome.google.com/webstore/detail/omodcjkkgloalobdfdkoiaplajfgeapj">豆瓣聊</a></p>
                        <p class="commit">豆瓣即时聊天工具</p>
                        <p><a target="_black" href="https://chrome.google.com/webstore/detail/njeebknkghnjbobnghdlfgfaigkjciih">易词典</a></p>
                        <p class="commit">Chrome下最好用的翻译工具,可取词可划词,支持Google翻译、金山词霸、QQ词典、海词、百度翻译、有道翻译、必应词典</p>
                    </div>
                </section>
            </div>
        </div>
        <script type="text/javascript" src="../src/options.js"></script>
    </body>
</html>
